import React from 'react'
import ReactDOM from 'react-dom/client'
interface ParamsType {
  title: string
  content?: string
  okText?: string
  cancelText?: string
  onOk?: () => void
  onCancel?: () => void
}

// export class

export class Dialog {
  static confirm(params: ParamsType) {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const root = ReactDOM.createRoot(div);
    const onOk = params.onOk
    const onCancel = params.onCancel
    params.onOk = () => {
      div.remove();
      onOk && onOk()
    }
    params.onCancel = () => {
      div.remove();
      onCancel && onCancel()
    }
    root.render((
      <Confirm { ...params } ></Confirm>  
    ))
  }
}

export const Confirm: React.FC<ParamsType> = ({ title, content, okText, cancelText, onOk
, onCancel }) => {
  return (
    <div style={{
      position: 'fixed',
      width: '100vw',
      height: '100vh',
      background: 'rgba(0,0,0,.6)',
      left: 0,
      top: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div style={{
        background: 'white',
        width: 500,
        minHeight: 100,
        borderRadius: 20,
        padding: 10 
      }}>
        <h3>{ title }</h3>
        <div className="content">{ content }</div>
        <div style={{
          display: 'flex',
          justifyContent: 'flex-end'
        }}>
          <button style={{ margin: 4 }} onClick={onCancel}>取消</button>
          <button style={{ margin: 4 }} onClick={onOk}>确定</button>
        </div>
      </div>
    </div>
  )
}



